<template>
	<view class="">
		<view class="top_bg ">
			<view class="top-width flex">
				<view class="left_widht" @click="go_back">
					<image class="left_img" src="../static/left.png" mode="widthFix"></image>
				</view>
				<view class="center-width flex">
					<view class="choose_moth flex">
						<uni-data-select v-model="value" :localdata="range" :clear="false"
							@change="change"></uni-data-select>
						<image class="rili" src="../static/rili.png" mode="widthFix"></image>
					</view>
					<view class="title-name">{{tit_name}}</view>
					<image class="xia" src="../static/xiazai.png" mode="widthFix"></image>
				</view>
				<view class="foot-width"></view>
			</view>
		</view>
		<!-- 资产/负债 -->
		<view class="">
			<view class="zichan_list">
				<view class="zichan_title" @click="choose_title(zichan)" v-for="(zichan,index) in zichanlists"
					:key="index" :current="current">
					<view :class="current == index ? 'size_xz' : 'size'">{{zichan.title_name}}</view>
				</view>
			</view>
			<view class="zichan_bg_list">
				<view class="zijin" v-for="(zichan_list,index) in zichan_lists" :key="index"
					@click="choose_project(zichan_list)">
					<view class="huobi">{{zichan_list.name}}</view>
					<view class="flex">
						<view class="font-29">{{zichan_list.total}}</view>
						<image class="right-40" src="../../static/images/user/icon_right_arrow.png" mode="widthFix">
						</image>
					</view>
				</view>
			</view>

			<!-- <view class="xiang flex">
				<image class="jia" src="../static/add.png" mode="widthFix"></image>
				<view class="wenzi">选项</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tit_name: '', //标题名称
				value: '',
				range: [{
						value: 1,
						text: "1月"
					},
					{
						value: 2,
						text: "2月"
					},
					{
						value: 3,
						text: "3月"
					},
					{
						value: 4,
						text: "4月"
					}, {
						value: 5,
						text: "5月"
					}, {
						value: 6,
						text: "6月"
					}, {
						value: 7,
						text: "7月"
					}, {
						value: 8,
						text: "8月"
					}, {
						value: 9,
						text: "9月"
					}, {
						value: 10,
						text: "10月"
					}, {
						value: 11,
						text: "11月"
					}, {
						value: 12,
						text: "12月"
					}
				],
				current: 0,
				zichanlists: [{
					id: 0,
					title_name: '资产'
				}, {
					id: 1,
					title_name: '负债'
				}],
				zichan_lists: [],

			};
		},
		onLoad(option) {
			this.tit_name = option.name
			this.getData()
		},
		mounted() {
			this.value = this.getCurrentDate();
		},
		methods: {
			getCurrentDate() {
				let now = new Date();
				let month = now.getMonth() + 1;
				return month;
			},
			change(e) {
				console.log("e:", e);
				this.getData()
			},
			choose_title(e) {
				this.current = e.id
				this.getData()
			},
			go_back() {
				uni.navigateBack({
					delta: 1
				})
			},
			choose_project(e) {
				console.log("eeee", e);
				uni.navigateTo({
					url: "/pagesC/fuzhaibiao/zichan_name?id=" + e.inouttype_id + '&name=' + e.name
				})
			},
			getData() {
				this.$H.post('/v2/store/user/inouttype', {
					month: this.value,
					type: this.current,
				}).then(res => {
					if (res.status.succeed == 1) {
						this.zichan_lists = res.data
					}
					console.log("获取账户明细列表", res);
				})
			},
		},
	};
</script>

<style>
	.jia {
		width: 40rpx;
		display: block;
	}

	.wenzi {
		font-size: 40rpx;
		color: #efa445;
		font-weight: 600;
		margin-left: 15rpx;
	}

	.xiang {
		width: 630rpx;
		margin: auto;
		margin-top: 40rpx;
	}

	.huobi {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
	}

	.zijin:last-of-type {
		border: none;
	}

	.zijin {
		width: 650rpx;
		padding: 25rpx 0 25rpx 0;
		border-bottom: 1px solid #eee;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.font-29 {
		font-size: 29rpx;
		color: #666;
	}

	.right-40 {
		width: 40rpx;
		display: block;
	}

	.zichan_bg_list {
		width: 690rpx;
		background-color: #fff;
		border-radius: 8rpx;
		margin: 20rpx auto auto;
	}

	.zichan_title {
		margin: auto;
	}

	.zichan_list {
		width: 690rpx;
		margin: 30rpx auto auto;
		display: flex;
		align-items: center;
	}

	.size {
		width: 150rpx;
		font-size: 45rpx;
		font-weight: 600;
		padding-bottom: 20rpx;
		color: #000;
		text-align: center;
	}

	.size_xz {
		padding-bottom: 20rpx;
		width: 150rpx;
		text-align: center;
		font-weight: 600;
		border-bottom: 2px solid #ff5500;
		font-size: 45rpx;
		color: #f47a58;
	}

	.title-name {
		font-size: 35rpx;
		color: #fff;
		font-weight: 600;
	}

	.foot-width {
		width: 20%;
	}

	.center-width {
		width: 60%;
		justify-content: space-between;
	}

	.left_widht {
		width: 20%;
	}

	/deep/.uni-select__input-text {
		font-size: 30rpx !important;
		color: #fff !important;
		font-weight: 600 !important;
	}

	/deep/.uni-select {
		border: none !important;
	}

	/deep/.uni-select__selector-empty,
	.uni-select__selector-item {
		line-height: 60rpx !important;
		padding: 0rpx 7rpx !important;
	}

	.top-width {
		width: 690rpx;
		margin: 70rpx auto auto;
	}

	.left_img {
		width: 40rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.rili {
		width: 40rpx;
		display: block;
	}

	.top_bg {
		width: 750rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		background-color: #ff5500;
	}

	.xia {
		width: 50rpx;
		display: block;
		margin-right: 30rpx;
		margin-top: 10rpx;
	}
</style>